import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { AuthProvider, useAuth } from './contexts/AuthContext';
import LoginPage from './pages/LoginPage';
import RegisterPage from './pages/RegisterPage';
import HomePage from './pages/HomePage/HomePage';
import MatchPage from './pages/MatchPage/MatchPage';
import MembershipPage from './pages/MembershipPage/MembershipPage';
import Navbar from './components/Navbar';
import { StagewiseToolbar } from '@stagewise/toolbar-react';
import ReactPlugin from '@stagewise-plugins/react';
import './App.css';

// 主应用内容组件
const AppContent: React.FC = () => {
  const { isAuthenticated, isLoading } = useAuth();

  // 加载中状态
  if (isLoading) {
    return (
      <div className="loading-container">
        <div className="loading-spinner"></div>
        <p>加载中...</p>
      </div>
    );
  }

  return (
    <Routes>
      {/* 登录页面路由 */}
      <Route path="/login" element={<LoginPage />} />
      <Route path="/register" element={<RegisterPage />} />
      
      {/* 需要认证的路由 */}
      {isAuthenticated ? (
        <>
          <Route path="/" element={
            <div className="app-container">
              <Navbar />
              <main className="app-main">
                <HomePage />
              </main>
            </div>
          } />
          <Route path="/matches" element={
            <div className="app-container">
              <Navbar />
              <main className="app-main">
                <MatchPage />
              </main>
            </div>
          } />
          <Route path="/membership" element={
            <div className="app-container">
              <Navbar />
              <main className="app-main">
                <MembershipPage />
              </main>
            </div>
          } />
        </>
      ) : (
        /* 未登录时重定向到登录页 */
        <Route path="*" element={<LoginPage />} />
      )}
    </Routes>
  );
};

// 主应用组件
function App() {
  return (
    <Router>
      <AuthProvider>
        <AppContent />
        <StagewiseToolbar 
          config={{
            plugins: [ReactPlugin]
          }}
        />
      </AuthProvider>
    </Router>
  );
}

export default App;
